import React ,{Suspense}from "react";
import { BrowserRouter, Link } from "react-router-dom";
import FadeInRoute from "./component/FadeInRoute";
import "./App.css";

//components
const Home = React.lazy(() => import(/* webpackChunkName: "Home" */ "@/container/Home"));
const List = React.lazy(() => import(/* webpackChunkName: "List" */ "@/container/List"));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <section>
        <div className="App">
          <BrowserRouter>
            <div className="nav">
              <Link to="/">home</Link> &nbsp;&nbsp;&nbsp;
              <Link to="/list">list</Link>
            </div>
            <FadeInRoute exact path="/" component={Home} />
            <FadeInRoute path="/list" component={List} />
          </BrowserRouter>
        </div>
      </section>
    </Suspense>
  );
}

export default App;
